<template>
    <div>
        <el-input v-model="value" :validate-event="false" :placeholder="placeholder" @focus="visible = true" readonly size="small" />
        <el-dialog :visible="visible" :title="titleName?titleName:$t('inventoryManagement.selectUser')" width="700px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @open="onOpen" @close="onClose">
            <div>
                <el-form :model="searchForm" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item :label="$t('defectIncoming.materialMax')" prop="materialMax">
                                <el-select v-model="queryParams.materialMax" multiple filterable size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('defectIncoming.materialMax')">
                                    <el-option v-for="(item,index) in materialMaxOptions" :key="index" :label="item.materialMax" :value="item.materialMax">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item style="text-align:right">
                                <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                                <el-button icon="el-icon-refresh" @click="reset" size="mini">{{ $t("public.reset") }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="container-table">
                    <el-table border stripe v-loading="loading" @selection-change="handleSelectionChange" :data="tableDatas" max-height="300px">
                        <el-table-column type="selection" width="55" v-if="multiple" align="center" />
                        <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center"></el-table-column>
                        <el-table-column :label="$t('defectIncoming.materialMax')" align="left" prop="materialMax" />
                        <el-table-column :label="$t('defectIncoming.materialMiddle')" align="left" prop="materialMiddle" />
                        <el-table-column :label="$t('public.opera')" v-if="!multiple" align="center" width="100">
                            <template slot-scope="scope">
                                <a class="action-wrap" @click="choose(scope.row)" style="color:#5a9eaf">
                                    {{$t('rule.select')}}
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>

                </div>
            </div>
            <div slot="footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
                <el-button type="primary" @click="submitData" icon="el-icon-check" size="small" v-if="multiple">{{$t('modal.yes')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getMasterialMaxMinData } from '@/api/basic/materialtype'
export default {
    name: 'SelectUserDialog',
    props: {
        value: {
            type: [String, Number, Array, Object],
            default() {
                return ''
            },
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
        titleName: {
            type: String,
            default: '',
        },
        placeholder: {
            type: [Object, String],
        },
    },
    data() {
        return {
            total: 1,
            tableDatas: [],
            visible: false,
            ids: [],
            names: [],
            searchForm: {
                templateName: null,
            },
            queryParams: {
                materialMax: [],
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
            checkDatas: [],
            materialMaxOptions: [],
        }
    },
    methods: {
        filterParams(p) {
            if (p && p.length) {
                return p.join(',')
            } else {
                return 'all'
            }
        },
        submitData() {
            console.log(this.names.join(','))
            if (this.names.length === 0) {
                this.$modal.msgWarning('请至少选择一个用户!')
                return
            }
            this.$emit('input', this.names.join(','))
            this.$emit('blur')
            this.visible = false
        },
        getList() {
            this.loading = true
            let params = JSON.parse(JSON.stringify(this.queryParams))
            params.materialMax = this.filterParams(params.materialMax)
            getMasterialMaxMinData(params).then((response) => {
                if (response.code == 200) {
                    this.tableDatas = response.data
                    this.loading = false
                }
            })
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.getList()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.checkDatas = selection
            this.names = selection.map((item) => item.materialMiddle)
            // this.multiple = !selection.length
        },
        // 窗口打开
        onOpen() {
            getMasterialMaxMinData({}).then((response) => {
                if (response.code == 200) {
                    this.materialMaxOptions = response.data
                }
            })
            this.getList()
        },
        // 窗口关闭
        onClose() {
            this.$emit('callback', this.names)
            this.visible = false
        },
        handleConfirm() {
            this.visible = false
        },
        choose(row) {
            this.$emit('input', row.materialMiddle)
            this.visible = false
        },
        // 窗口关闭前执行
        close() {
            this.visible = false
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
